<template>
    <div class="app-container" style="padding:20px">
        <div style="display: flex;">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly" style="width: 65%;">
                <el-card class="top15" style="height: calc(100vh - 215px);overflow-y: scroll">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                    </div>
                    <el-form-item label="套红模版" prop="templateId">
                        <el-select v-model="form.templateId" placeholder="请选择套红模版" clearable >
                            <el-option v-for="tpl in redHeadTplList" :key="tpl.id" :label="tpl.name" :value="tpl.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入标题" @input="formatHtml"/>
                    </el-form-item>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="企字" prop="qizi">
                                <el-input v-model="form.qizi" placeholder="请输入企字" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="年份" prop="year">
                                <el-input v-model="form.year" placeholder="请输入年份" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="第几号文" prop="num">
                                <el-input v-model="form.num" placeholder="请输入第几号文" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="发文日期" prop="sendDate">

                                <el-date-picker clearable v-model="form.sendDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择发文日期" @change="formatHtml">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>



                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="发文部门" prop="company">
                                <el-input v-model="form.company" placeholder="请输入发文部门" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="8">

                            <el-form-item label="密级" prop="secretLevel">
                                <el-select v-model="form.secretLevel" placeholder="请选择密级" clearable>
                                    <el-option
                                            v-for="item in $dictObject.secretLevels"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>

                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="紧急程度" prop="emergentLevel">
                              <el-select v-model="form.emergentLevel" placeholder="请选择紧急程度" clearable>
                                <el-option
                                    v-for="item in $dictObject.ao_urgency"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                              </el-select>


                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="保密期间" prop="secretPeriod">

                              <el-select v-model="form.secretPeriod" placeholder="请选择密级" clearable>
                                <el-option
                                    v-for="item in $dictObject.secretLevels"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                              </el-select>

                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="公开类别" prop="publicCategory">

                              <el-select v-model="form.publicCategory" placeholder="请选择公开类别" clearable>
                                <el-option
                                    v-for="item in $dictObject.oa_gklb"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                              </el-select>

                            </el-form-item>
                        </el-col>


                    </el-row>
                    <el-form-item label="公文内容">
                        <avue-ueditor v-model="form.content" v-bind="txtoptions" @input="formatHtml"></avue-ueditor>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>

                  <div style="text-align: center">
                    <el-button type="primary" @click="saveForm">保存</el-button>
                  </div>
                </el-card>
            </el-form>

            <div style="width: 35%;margin-top: 15px; margin-left: 15px;">
                <el-card style="height: calc(100vh - 215px);overflow-y: scroll">
                    <div slot="header" class="clearfix">
                        <span>公文预览</span>
                    </div>
                    <div v-html="form.sealHtml"></div>
                </el-card>
            </div>
        </div>

    </div>

</template>
<script>
    import website  from '@/framework-core/config/website';
    import {pageCore,listCore,delCore,getCore,saveCore,importCore,exportCore,downloadCore} from "@/framework-core/api/core/api";

    export default {
    name: "OfficalDocForm",
    data() {
        return {
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            redHeadTplList:[],
            redHeadTplMap:{},
            deptOptions:[],
            // 是否显示弹出层
            visible: false,
            txtoptions:{
                action:  website.baseUrl+"/api/sys/file/upload",
                "data": {
                    // 额外参数
                    // "name": "file",
                },
                 headers:{},
                 oss:"",
                "propsHttp": {
                  home:'',
                  // 上传完成返回的json的root
                  "res": "data.data",
                  // 上传完成返回的图片路径
                  "url": "url",
                  // 上传文件名，默认file
                  "fileName": "file",
                },
                "customConfig": {},
                "overHidden": true
            },
            form:{
            },
            // 表单校验
            rules: {
              templateId: [
                    {required: true, message: "套红id不能为空", trigger: "blur"}
                ],
                title: [
                    {required: true, message: "标题不能为空", trigger: "blur"}
                ],
                content: [
                    {required: true, message: "公文内容不能为空", trigger: "blur"}
                ],
                year: [
                    {required: true, message: "年份不能为空", trigger: "blur"}
                ],
                num: [
                    {required: true, message: "第几号文不能为空", trigger: "blur"}
                ],
                qizi: [
                    {required: true, message: "企字不能为空", trigger: "blur"}
                ],
                sendDate: [
                    {required: true, message: "发文日期不能为空", trigger: "blur"}
                ],
                receiveDeptIdArr: [
                    {required: true, message: "收文部门不能为空", trigger: "blur"}
                ]
            }
        }
    },
    // provide(){
    //     return {
    //         addCcedList:this.addCcedList
    //     }
    // },
    created() {
       this.getRedHeadTplList();


    },
    watch: {
        "form.content":function(newVal, oldVal) {
            this.formatHtml();
        }
    },
    methods: {
        init(isEdit,form){
            this.form = form;
            if(isEdit) {
              setTimeout(o => {
                this.formatHtml();
              }, 500)
            }
        },
        //查询套红模版
        getRedHeadTplList() {

            listCore(
                '/oa/oaTemplate',
                {}
            )
                .then(response => {
                    this.redHeadTplList = response.data.data.data;
                    if(  this.redHeadTplList) {
                        this.redHeadTplList.forEach(tp => {
                            this.redHeadTplMap[tp.id] = tp;
                        });
                    }
                })
                .catch(() => {
                });
        },
        formatHtml() {
            let headTemp = this.redHeadTplMap[this.form.templateId];
            if (!headTemp) {
                return
            }
            let html = headTemp.tpl;
            if (!html) {
                return
            }
            if(!this.form.company){
                this.form.company = headTemp.sealName;
            }
            if(!this.form.redTitle){
                this.form.redTitle = headTemp.redTitle;
            }
            html = html.replace(/{{(\w+)}}/g, (match, key) => this.parseStrEmpty(this.form[key]) || "");

            if (this.form.draftStatus === '1') {
                html = html.replace("<div id='seal'></div>", "<img src='" + this.baseUrl + this.form.img + "' style='width: 150px;height: 150px;position: absolute;right: 90px;top: 10px;'></div>");
            }
            this.form.sealHtml = html;
        },
        saveForm(){
          saveCore('/oa/oaDoc',this.form).then(data => {
            this.$message.success('成功')
            this.visible = false
          });
        },

        parseStrEmpty(str){
           return str||"";
        },
    }

}
</script>
